<template>
   <div>
     <shop-header></shop-header>
     <div class="tab">
       <router-link tag="li" to="/shop/goods" replace class="tab-item">
         <span>商家</span>
       </router-link>
       <router-link tag="li" to="/shop/ratings" replace class="tab-item">
         <span>评价</span>
       </router-link>
       <router-link tag="li" to="/shop/info" replace class="tab-item">
         <span>详情</span>
       </router-link>
     </div>
     <keep-alive>
         <router-view></router-view>
     </keep-alive>

   </div>
</template>

<script>
  import ShopHeader from '../ShopHeader/ShopHeader'
    export default {
        name: "shop",
        components:{
          ShopHeader
        },
        mounted(){
          this.$store.dispatch('getShopInfo')
        }

    }
</script>

<style scoped>
  .tab{
    display: flex;
    height: 40px;
    align-items: center;
    box-shadow: 6px 0px 13px #ccc;
  }
  .tab .tab-item{
    flex: 1;
    font-size: 13px;
    text-align: center;
  }
  .active span{
    border-bottom: 2px solid #198D22;
    color:#198D22 ;
  }
</style>
